<template>
  <a-drawer
    :title="formData.id ? '编辑' : '新建'"
    :visible="visibleFlag"
    :width="1000"
    :footerStyle="{ textAlign: 'right' }"
    @close="onClose"
    :destroyOnClose="true"
  >
    <a-form ref="formRef" :model="formData" :rules="formRules" >
      <a-row :span="24">
        <a-col :span="24">
        <a-form-item label="标题" name="title" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
          <a-input v-model:value="formData.title" placeholder="请输入标题" />
        </a-form-item>
      </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="24">
      <a-form-item label="简介" name="summary" :label-col="{ span: 3 }" :wrapper-col="{ span: 20 }">
        <a-input v-model:value="formData.summary" placeholder="请输入简介" />
      </a-form-item>
    </a-col>
    </a-row>
    <a-row :gutter="24">
      <a-col :span="8">
      <a-form-item label="分类" name="type" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <DictSelectType :service-id="SERVICE_ID_ENUM.DICTIONARY.value" :dcit-type="DICT_TYPE_ENUM.BLOG_TYPE.value" v-model:value="formData.type"  />
      </a-form-item>
    </a-col>
    <a-col :span="8">
      <a-form-item label="标签" name="labelId" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <DictSelectType :service-id="SERVICE_ID_ENUM.DICTIONARY.value" :dcit-type="DICT_TYPE_ENUM.BLOG_LABEL.value" v-model:value="formData.labelId" />
      </a-form-item>
    </a-col>
      <a-col :span="8">
      <a-form-item label="推荐级别" name="recommendLevel" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <DictSelectType :service-id="SERVICE_ID_ENUM.DICTIONARY.value" :dcit-type="DICT_TYPE_ENUM.BLOG_RECOMMEND_LEVEL.value" v-model:value="formData.recommendLevel" />
      </a-form-item>
    </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="6">
      <a-form-item label="是否原创" name="isOriginal" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-switch v-model:checked="formData.isOriginal" checkedValue="Y" unCheckedValue="N"/>
      </a-form-item>
    </a-col>
      <a-col :span="6">
      <a-form-item label="文章类型" name="isPublicize" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-switch v-model:checked="formData.isPublicize" checkedValue="Y" unCheckedValue="N"/>
      </a-form-item>
    </a-col>
      <a-col :span="6">
      <a-form-item label="文章评论" name="openComment" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-switch v-model:checked="formData.openComment" checkedValue="Y" unCheckedValue="N"/>
      </a-form-item>
    </a-col>
      <a-col :span="6">
      <a-form-item label="是否发布" name="isPublish" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-switch v-model:checked="formData.isPublish" checkedValue="Y" unCheckedValue="N" checked-children="发布" un-checked-children="下架"/>
      </a-form-item>
    </a-col>
    </a-row>
      <a-row :gutter="24">
        <a-col :span="8">
        <a-form-item label="标题图片" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <Upload
          :defaultFileList="defaultFileList"
          :maxUploadSize="1"
          :folder="FILE_FOLDER_TYPE_ENUM.HELP_DOC.value"
          buttonText="上传附件"
          listType="text"
          extraMsg="最多上传1个附件"
          @change="changeAttachment"
        />
      </a-form-item>
    </a-col>
      
      <a-col :span="8">
      <a-form-item label="外链" name="outsideLink" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-input  v-model:value="formData.outsideLink" placeholder="外链地址" />
      </a-form-item>
    </a-col>
      <a-col :span="8">
      <a-form-item label="排序" name="sort" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <a-input-number v-model:value="formData.sort" :min="1" :max="100" />
      </a-form-item>
    </a-col>
    </a-row>
      <a-row :gutter="24">
      <a-form-item label="文章内容" name="content">
        <Wangeditor ref="contentRef" :modelValue="formData.content" :height="300" />
      </a-form-item>
    </a-row>
    </a-form>

    <template #footer>
      <a-space>
        <a-button @click="onClose">取消</a-button>
        <a-button type="primary" @click="onSubmit">保存</a-button>
      </a-space>
    </template>
  </a-drawer>
</template>

<script setup lang="ts">
  import { reactive, ref, nextTick } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import lodash from 'lodash';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { FILE_FOLDER_TYPE_ENUM } from '/@/constants/support/file-const';
  import { blogApi } from '/@/api/blog-api/blog-api';
  import Wangeditor from '/@/components/framework/wangeditor/index.vue';
  import Upload from '/@/components/support/file-upload/index.vue';
  import { SERVICE_ID_ENUM,DICT_TYPE_ENUM } from '/@/constants/system/cache-service-id-const';
  import DictSelectType from '/@/components/cache/dict-select-type.vue';
  import _ from 'lodash';
import { smartSentry } from '/@/lib/smart-sentry';

  const emits = defineEmits(['reloadList']);

  // ------------------ 显示，关闭 ------------------
  // 显示
  const visibleFlag = ref(false);
  function showModal(docId) {
    Object.assign(formData, defaultFormData);
    defaultFileList.value = [];
    if (docId) {
      getDetail(docId);
    }

    visibleFlag.value = true;
    nextTick(() => {
      formRef.value.clearValidate();
    });
  }

  // 关闭
  function onClose() {
    visibleFlag.value = false;
  }

  // ------------------ 表单 ------------------

  const formRef = ref();
  const contentRef = ref();
  
  const defaultFormData = {
    id: undefined,
    title: undefined,
    summary: undefined, 
    content: undefined, 
    type: undefined, 
    labelId: undefined, 
    fileId: undefined, 
    isPublish: 'N', 
    isOriginal: 'N', 
    source: undefined, 
    recommendLevel: '0', 
    sort: 0, 
    openComment: 'N', 
    isPublicize: 'N', 
    outsideLink: undefined, 
    contentHtml:undefined
  };

  const formData = reactive({ ...defaultFormData });

  const formRules = {
    title: [{ required: true, message: '请输入标题' }],
    summary: [{ required: true, message: '请输入简介' }],
    content: [{ required: true, message: '请输入内容' }],
    type: [{ required: true, message: '请选择类型' }],
  };

  // 查询详情
  async function getDetail(docId) {
    try {
      SmartLoading.show();
      const result = await blogApi.get(docId);
      Object.assign(formData, result.data);
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  // 点击确定，验证表单
  async function onSubmit() {
    try {
      //formData.contentHtml = contentRef.value.getHtml();
      formData.content = contentRef.value.getHtml();
      await formRef.value.validateFields();
      save();
    } catch (err) {
      message.error('参数验证错误，请仔细填写表单数据!');
    }
  }

  async function save() {
    try {
      SmartLoading.show();
      let param = _.cloneDeep(formData);
      await blogApi.save(param);
      message.success('保存成功');
      emits('reloadList');
      onClose();
    } catch (err) {
      smartSentry.captureError(err);
    } finally {
      SmartLoading.hide();
    }
  }

  // ----------------------- 上传附件 ----------------------------
  // 已上传的附件列表
  const defaultFileList = ref([]);
  function changeAttachment(fileList) {
    defaultFileList.value = fileList;
    formData.attachment = lodash.isEmpty(fileList) ? [] : fileList;
  }

  // ----------------------- 以下是暴露的方法内容 ------------------------
  defineExpose({
    showModal,
  });
</script>

<style lang="less" scoped>
  .visible-list {
    display: flex;
    flex-wrap: wrap;
    .visible-item {
      padding-top: 8px;
    }
  }
</style>
